<template>
  <div class="banner" id="banner1">
    <h1 class="banner-title">商城</h1>
    <a @click="$router.push('/dashboard')"
       style="color: black;font-size: small;position: relative;top:70px;left: 1300px;font-weight: bold"
       class="banner-title">首页</a>
    <a @click="$router.push('/myblog')"
       style="color: black;font-size: small;position: relative;top:70px;left: 1300px;font-weight: bold"
       class="banner-title">我的博客</a>
    <a @click="$router.push('/message')"
       style="color: black;font-size: small;position: relative;top:70px;left: 1300px;font-weight: bold"
       class="banner-title">留言</a>
    <a @click="$router.push('/show')"
       style="color: black;font-size: small;position: relative;top:70px;left: 1300px;font-weight: bold"
       class="banner-title">江湖</a>
   <!-- <div style="margin-top: 80px">
      <el-input style="width: 20%;margin-left: 450px" placeholder="请输入关键词"/>
      <el-button type="primary" style="margin-left: 10px">搜索</el-button>
    </div>-->
    <div style="margin-top: 400px">
      <el-row>
        <el-col :span="4" v-for="item in forms">
          <el-card :body-style="{ padding: '0px' }"
                   style="margin-left: 6px;height: 325px;width: 210px;margin-top: 20px" id="col">
            <img :src="item.img"/>
            <p style="color: red;font-size: large;padding-left: 10px">￥{{item.price}}</p>
            <div style="padding: -3px;display: flex;margin-top: -17px;">
              <p style=" font-weight: bold;color: #666;height: 14px;margin-top: 10px;margin-left: 12px">
                {{item.name}}({{item.author}})
              </p>

              <div class="bottom clearfix">
              </div>
            </div>

            <el-button type="success" v-model="forms[item.id]"  style="margin-left: 150px;border-radius: 40px" @click="buy(item.id)">购买
            </el-button>
          </el-card>
        </el-col>
      </el-row>


    </div>
    <div style="border: 0px #ccc;height: 10vh;">
      <div app padless absolute >
        <div class="footer-wrap" style="margin-top: 70px">
          <div>©2021 - {{ new Date().getFullYear() }} By chenchao</div>
          <a href="https://beian.miit.gov.cn/" target="_blank">
            邮箱：2776895893@qq.com
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import "../assets/index.css";
  import request from '../utils/request'
  import effect from '../views/Effect'
  import '../../public/ribbon.js'
  export default {
    name: 'BlogStore',
    components:{effect},
    data() {
      return {
        forms: [],
        form: {},
        forms1: {}

      }
    },

    created() {

      let str = sessionStorage.getItem('user')
      this.form = JSON.parse(str)
      request.get('/book/findAll').then(res => {
        this.forms = res.data
      })


    },

    methods: {
      buy(id) {

        request.get('/order/buy/' + id,this.forms).then(res => {


          // 请求成功跳转沙箱支付的页面
          console.log(res)
          window.open(res.data)
        })
      }
    }

  }
</script>

<style scoped>
#banner1{
  background: url("https://www.static.talkxj.com/photos/f426814dd3748727443775b3e588f68f.png")  no-repeat center center/cover;
}
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
.footer-wrap {
  width: 100%;
  line-height: 2;
  position: relative;
  padding: 40px 20px;
  color: #eee;
  font-size: 14px;
  text-align: center;
  background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: Gradient 10s ease infinite;
}

.footer-wrap a {
  color: #eee !important;
}

@keyframes Gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
</style>
